<template>
  <view :class="toBgImage">
    <view class="advertising_btn">
      <view @click="stop">跳过</view>
    </view>
    <view class="advertising_next">
      <u-button
          :custom-style="{
        width: '429rpx',
	      height: '78rpx',
	      background: 'linear-gradient(110deg, #DD2910 0%, #F79B29 100%)',
	      borderRadius:'26rpx',
	      marginBottom:'153.49rpx'
      }"
          hover-class="none" type="primary" @click="next(3)">下一步
      </u-button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      index: 1 //默认显示的背景图
    };
  },
  computed: {
    toBgImage() { //背景图类名的拼接
      return `advertising advertising${this.index}`
    }
  },
  methods: {
    next(item) {
      if (this.index < item) return this.index += 1
      this.$u.route({
        type: "redirectTo",
        url: "/pages/tabbar/index/index"
      })
    },
    stop() {
      this.$u.route({
        type: "redirectTo",
        url: "/pages/tabbar/index/index"
      })
    }
  }
}
</script>

<style lang="scss">
.advertising {
  height: 100vh;
}

.advertising1 {
  background: url($my-bg-url + "20230717/7b90844356c931e2102075dc2e1a9dad.png");
  background-size: 100%;
}

.advertising2 {
  background: url($my-bg-url + "20230717/9e22135d011d671a37be871252fae2ed.png");
  background-size: 100%;
}

.advertising3 {
  background: url($my-bg-url + "20230717/75a872ebe487298f22ff5305c8131852.png");
  background-size: 100%;
}

.advertising {
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .advertising_btn {
    display: flex;
    justify-content: flex-end;
    padding: 31.4rpx;

    view {
      width: 103rpx;
      height: 38rpx;
      text-align: center;
      border-radius: 19rpx;
      border: 2rpx solid #979797;
      font-size: 24rpx;
      font-weight: 400;
      color: #757575;
      line-height: 35rpx;
    }
  }
}
</style>
